<template>

    <div class="contain">
        <div :class="imageanimation">
            <div v-for="item in 6" class="face" :key="`face${item}`"> </div>
        </div>
        <div class="loginpanel">
            <div class="username">
                <input id="name" v-model="loginname" @blur="blurEvent" @focus="focusEvent($event)" type="text">
                <div class="u"><span>请输入用户名</span></div>
            </div>

            <!-- <div class="password">
                <input class="p" type="text">
            </div> -->
        </div>
        <a @click="loginevent">LOGIN</a>

    </div>
    <div v-show="ifshowMask" class="mask">
    </div>

</template>

<script setup>
import { onMounted } from "vue";
import { login } from '@/api/system';
import { setToken } from '@/utils/token';
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance();
const router = useRouter();
let loginname = ref('')
let imageanimation = ref({
    image: true,

})
let ifshowMask = ref('none')

let el = null
let focusEvent = (e) => {
    if (el)
        el.style = 'animation-play-state:paused;'
}
let blurEvent = () => {
    if (el)
        el.style = 'animation-play-state:running;'
}
let loginevent = async () => {
    if (loginname.value === '') {
        ElMessage({
            message: '请填写用户名',
            type: 'warning',
        })
        return
    }
    let re = await login({ name: loginname.value })
    if (re.code === 200) {
        setToken(re.token)
        ifshowMask.value = ''
        useUserStore().name = loginname.value
        setTimeout(() => {
            router.push({ path: "/index" });
        }, 3000)
    }
    else
        ElMessage({
            message: re.message || '发生异常错误！',
            type: 'error',
        })


}
onMounted(() => {

})
</script>

<style lang="scss" scope>
input {
    border: unset;
    position: relative;
    z-index: 2;
    outline: unset;
    width: calc(100% - 40px);
    height: 50px;
    line-height: 50px;
    background-color: transparent;
}
// @mixin Arrow() {
// }
// .arrow {
//     @include Arrow();
// }

.contain {
    height: 100vh;
    min-width: 390px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;

    &::after {
        display: v-bind(ifshowMask);
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 111;
        animation: 3s backgroundgrandient1 cubic-bezier(0.25, 1, 0.3, 1)
            forwards;
    }
    @keyframes backgroundgrandient1 {
        @for $i from 1 through 100 {
            #{ $i * 1% } {
                background-image: radial-gradient(
                    transparent 0%,
                    #0d1a26 #{(100 - $i) * 1%}
                );
            }
        }
    }

    .image {
        max-width: calc(var(--loginPanelmaxWidth) - 40px);
        width: calc(100% - 40px);
        height: calc(var(--loginPanelmaxWidth) - 40px);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        transform-style: preserve-3d;
        animation: rtoate3da 5s linear infinite;
        @keyframes rtoate3da {
            from {
                transform: rotate3d(1, 1, 1, 0deg);
            }
            to {
                transform: rotate3d(1, 1, 1, 360deg);
            }
        }
        .face {
            top: 20px;
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.5;
            &:nth-child(1) {
                background-color: #fff;
                transform: translateZ(100px);
            }
            &:nth-child(2) {
                background-color: rgb(209, 61, 61);
                transform: translateZ(-100px);
            }
            &:nth-child(3) {
                background-color: rgb(153, 206, 85);
                transform: rotateY(90deg) translateX(100px);
                transform-origin: right;
            }
            &:nth-child(4) {
                background-color: rgb(51, 218, 190);
                transform: rotateY(90deg) translateX(-100px);
                transform-origin: left;
            }
            &:nth-child(5) {
                background-color: rgb(45, 133, 248);
                transform: rotateX(90deg) translatey(-100px);
                transform-origin: top;
            }
            &:nth-child(6) {
                background-color: rgb(231, 93, 220);
                transform: rotateX(90deg) translatey(100px);
                transform-origin: bottom;
            }
        }
    }
    .loginpanel {
        max-width: var(--loginPanelmaxWidth);
        height: 200px;
        width: calc(100% - 80px);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
        .u {
            z-index: 1;
            position: absolute;
            left: 0;
            top: calc(100% / 2);
            transform: translateY(-50%);
            width: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
                opacity: 0.4;
            }
            margin-left: 20px;
            transition: transform 0.3s ease;
        }
        .username,
        .password {
            position: relative;
            //z-index: 10;
            padding-left: 20px;
            border-radius: 10px;
            border: 1px solid rgba($color: #000000, $alpha: 0.4);

            & {
                input {
                    &:focus,
                    &:invalid {
                        & ~ .u {
                            transform: translateY(calc(-50px + 50%));
                            background-color: #fff;
                        }
                    }
                }
            }
        }
    }
    a {
        text-decoration: none;
        cursor: pointer;
        background: linear-gradient(
            70deg,
            rgb(90, 90, 240),
            rgb(4, 171, 255),
            rgb(210, 233, 129),
            rgb(204, 167, 245)
        );
        background-size: 400%;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        text-transform: uppercase;
        border-radius: 50px;
    }

    a:hover {
        background-color: white;
        animation: light 7s infinite;
    }

    @keyframes light {
        0% {
            background-position: 0% 0;
        }
        50% {
            background-position: 400% 0;
        }
        100% {
            background-position: 0% 0;
        }
    }
}
@media screen and (max-width: 450px) {
    .contain {
        .image {
            padding-top: calc(100% - 40px) !important;
            height: unset !important;
        }
    }
}
</style>